console.log("hello webpack");

import css from "@styles/index.css";
import style from "@styles/index.scss";
import less from "@styles/index.less";

// import pic from "@images/demo.png";
// console.log("pic", pic);
// const img = new Image();
// img.src = pic;
// const root = document.getElementById("app");
// root.append(img);

// console.log("source map");

// // import axios from "axios";
// // axios.get("/api/info").then((res) => {
// //   console.log(res);
// // });

// // css hmr //
// var btn = document.createElement("button");
// btn.innerHTML = "新增";
// root.appendChild(btn);

// btn.onclick = function () {
//   var div = document.createElement("div");
//   div.innerHTML = "item";
//   div.className = "item";
//   root.appendChild(div);
// };

// // js hmr
// import counter from "./counter";
// import number from "./number";
// counter();
// number();
// console.log("module.hot", module.hot);

// if (module.hot) {
//   //是否开启HMR
//   console.log("开启HMR");
//   module.hot.accept("./number.js", function () {
//     //先移除number创建的div模块
//     document.body.removeChild(document.getElementById("number"));
//     //再用number模块创建一个新的div模块
//     number();
//   });
// }

// // babel
// // 编译 es6+
// // import "@babel/polyfill";
// const arr = [new Promise(() => {}), new Promise(() => {})];
// arr.map((item) => {
//   console.log(item);
// });
// // 原始：26 kb
// polyfill：1000 kb
// usage：351 KiB

// // 编译 react
import React, { Component } from "react";
import ReactDom from "react-dom";

class ReactApp extends Component {
  render() {
    return <div>Hello React!</div>;
  }
}

ReactDom.render(<ReactApp />, document.getElementById("reactRoot"));

// // 编译 Vue
import Vue from "vue";
import VueApp from "./babelVueTest";

new Vue({
  render: (h) => h(VueApp),
}).$mount("#vueRoot");

// js 摇树
// import { usefulAdd, unUseMinus } from "./jsTreeShakingTest";
// console.log(usefulAdd(1, 2));

// // 代码分割
// import _ from 'lodash'
// console.log(_.join(["a", "b", "c"], "****"));
